<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="/WEB-INF/view/common/tag.jsp" %>
<head>
    <meta charset="UTF-8"/>
    <title>首页-聊天机器人展览系统</title>
    <meta name="renderer" content="webkit"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta http-equiv="Access-Control-Allow-Origin" content="*"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="format-detection" content="telephone=no"/>
    <link rel="stylesheet" href="${baseurl}/lib/layui/css/layui.css">
    <link rel="stylesheet" href="${baseurl}/lib/portal/css/portal.css">
    <link rel="stylesheet" href="${baseurl}/lib/portal/css/global.css">
</head>
<body>
<jsp:include page="header.jsp">
    <jsp:param name="flag" value="2"></jsp:param>
</jsp:include>
<div class="content layui-container" style="padding-top: 15px;">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-panel clear-overflow" style="height: 550px">
                <div class="layui-col-md4" style="padding: 16px">
                    <img style="width: 300px" src="${exhibitionInfo.exhibitionImage}" alt="艺术馆图片"/>
                </div>

                <div class="layui-col-md8">
                    <div>
                        <div class="detail-title">${exhibitionInfo.exhibitionName}</div>
                        <div class="detail-title">${exhibitionInfo.exhibitionSummary}</div>
                    </div>
                    <div style="margin-top: 100px">
                        <form class="layui-form" action="">
                            <input type="hidden" name="id" value="${exhibitionInfo.id}">
                            <div class="layui-form-item">
                                <div class="layui-inline">
                                    <label class="layui-form-label">请选择日期</label>
                                    <div class="layui-input-inline">
                                        <input type="text" name="params[appointDate]" id="appointDate" lay-verify="date"
                                               autocomplete="off" placeholder="yyyy-MM-dd" class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <label class="layui-form-label">选择时间段</label>
                                    <div class="layui-input-inline">
                                        <input type="hidden" id="timePointValue" name="timePointValue">
                                        <select name="timePointKey" id="timePointKey" lay-verify="required" lay-filter="timePointSelect" disabled>
                                            <option value="" selected="">请选择时间段</option>
                                            <option value="1">11:00-12:00</option>
                                            <option value="2">12:00-13:00</option>
                                            <option value="3">13:00-14:00</option>
                                            <option value="4">15:00-15:00</option>
                                            <option value="5">15:00-16:00</option>
                                            <option value="5">16:00-16:00</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <div class="layui-input-block">
                                    <button class="layui-btn" lay-submit lay-filter="appoint">预定</button>
                                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!--footer-->
<jsp:include page="footer.jsp"></jsp:include>
<script type="text/javascript" src="${baseurl}/lib/layui/layui.js"></script>
<script type="text/javascript" src="${baseurl}/lib/layui_custom/Hlayui.js"></script>
<script>
    layui.use(['layer', 'laytpl', 'form', 'laypage', 'element', 'util','laydate', 'layerCustom'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var laytpl = layui.laytpl;
        var form = layui.form;
        var layerCustom = layui.layerCustom;
        var element = layui.element;
        var laydate = layui.laydate;
        var util = layui.util;

        laydate.render({
            elem: '#appointDate'
            , trigger: 'click'
            , showBottom: false
            , format: 'yyyy-MM-dd'
            ,done: function(value, date){
                $("#timePointKey").removeAttr("disabled");
                form.render('select')
            }
        });

        /*下拉框选择*/
        form.on('select(timePointSelect)',function (data) {
            var text = data.elem[data.elem.selectedIndex].text;
            $("#timePointValue").val(text);
        });
        /*表单提交*/
        form.on('submit(appoint)', function (data) {
            var url = BaseUrl + 'exhibitionInfo/appoint';
            //保存接口
            $.post(url, data.field, function (result) {
                if (result.success) {
                    layer.msg(result.msg, function () {
                        window.location.reload();
                    })
                } else {
                    if (result.code == 401) { //表示未登录
                        layer.msg(result.msg,function () {
                            layerCustom.yellowQuestionMsg("用户未登录，即将跳转到登录页面", function () {
                                window.top.location.href = BaseUrl + 'portal/login';
                            })
                        });
                        return;
                    }
                    layer.msg(result.msg)
                    return;
                }
            }, 'json');

            return false;
        });

        //固定Bar
        util.fixbar({
            bgcolor: '#009688'
        });
    })
</script>
</body>
</html>
